<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视频监控系统 - 中央控制台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#0FC6C2',
            danger: '#F53F3F',
            warning: '#FF7D00',
            success: '#00B42A',
            dark: '#12192C',
            'dark-light': '#1D2939',
            'dark-lighter': '#344054'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .camera-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 1rem;
      }
      .pulse-animation {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      @keyframes pulse {
        0%, 100% {
          opacity: 1;
        }
        50% {
          opacity: 0.7;
        }
      }
      .blink-warning {
        animation: blink 1.5s linear infinite;
      }
      @keyframes blink {
        50% {
          background-color: rgba(245, 63, 63, 0.3);
        }
      }
    }
  </style>
</head>

<body class="bg-dark text-gray-100 font-inter min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-dark-light border-b border-gray-700/30 sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- 品牌标识 -->
      <div class="flex items-center space-x-3">
        <button id="sidebar-toggle" class="lg:hidden text-gray-300 hover:text-white">
          <i class="fa fa-bars text-xl"></i>
        </button>
        <div class="flex items-center">
          <i class="fa fa-video-camera text-primary text-2xl mr-2"></i>
          <h1 class="text-xl font-bold text-white">SecureVision监控系统</h1>
        </div>
      </div>
      
      <!-- 时间和状态 -->
      <div class="hidden md:flex items-center space-x-6">
        <div class="flex items-center text-gray-300">
          <i class="fa fa-clock-o mr-2"></i>
          <span id="current-time">加载中...</span>
        </div>
        <div class="flex items-center">
          <span class="inline-block w-2 h-2 rounded-full bg-success mr-2 pulse-animation"></span>
          <span class="text-success">系统正常运行中</span>
        </div>
      </div>
      
      <!-- 用户信息 -->
      <div class="flex items-center space-x-4">
        <button class="relative text-gray-300 hover:text-white transition-colors">
          <i class="fa fa-bell text-xl"></i>
          <span class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-xs flex items-center justify-center">3</span>
        </button>
        <div class="flex items-center space-x-2">
          <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
          <span class="hidden md:inline font-medium">管理员</span>
        </div>
      </div>
    </div>
  </header>

  <div class="flex flex-1 overflow-hidden">
    <!-- 侧边栏导航 -->
    <aside id="sidebar" class="bg-dark-light w-64 border-r border-gray-700/30 flex-shrink-0 hidden lg:block transition-all duration-300 transform">
      <nav class="py-6 h-full flex flex-col">
        <div class="px-4 mb-6">
          <div class="relative">
            <input type="text" placeholder="搜索..." class="w-full bg-dark-lighter rounded-lg py-2 px-4 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          </div>
        </div>
        
        <ul class="space-y-1 px-2 flex-1 overflow-y-auto scrollbar-hide">
          <li>
            <a href="#" class="flex items-center px-4 py-3 rounded-lg bg-primary/10 text-primary border-l-4 border-primary">
              <i class="fa fa-tachometer w-5 text-center mr-3"></i>
              <span>监控概览</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-700/20 text-gray-300 transition-colors">
              <i class="fa fa-desktop w-5 text-center mr-3"></i>
              <span>实时监控</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-700/20 text-gray-300 transition-colors">
              <i class="fa fa-list-alt w-5 text-center mr-3"></i>
              <span>事件管理</span>
              <span class="ml-auto bg-danger text-white text-xs px-2 py-1 rounded-full">12</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-700/20 text-gray-300 transition-colors">
              <i class="fa fa-bar-chart w-5 text-center mr-3"></i>
              <span>统计分析</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-700/20 text-gray-300 transition-colors">
              <i class="fa fa-calendar w-5 text-center mr-3"></i>
              <span>录像回放</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-700/20 text-gray-300 transition-colors">
              <i class="fa fa-cog w-5 text-center mr-3"></i>
              <span>系统设置</span>
            </a>
          </li>
        </ul>
        
        <!-- 系统信息 -->
        <div class="mt-auto px-4 py-4 border-t border-gray-700/30">
          <div class="bg-dark rounded-lg p-3">
            <div class="text-xs text-gray-400 mb-2">系统状态</div>
            <div class="flex items-center justify-between text-sm">
              <span>在线摄像头</span>
              <span class="text-success">16/16</span>
            </div>
            <div class="flex items-center justify-between text-sm mt-1">
              <span>存储空间</span>
              <span class="text-warning">78%</span>
            </div>
          </div>
        </div>
      </nav>
    </aside>

    <!-- 主内容区域 -->
    <main class="flex-1 overflow-y-auto bg-dark p-4 lg:p-6">
      <!-- 页面标题和控制区 -->
      <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
        <div>
          <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-white">视频监控中心</h2>
          <p class="text-gray-400 mt-1">实时监控画面、事件记录与统计分析</p>
        </div>
        
        <div class="flex flex-wrap items-center gap-3">
          <div class="relative">
            <select class="bg-dark-light border border-gray-700 rounded-lg py-2 pl-3 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 appearance-none">
              <option>全部摄像头</option>
              <option>入口区域</option>
              <option>停车场</option>
              <option>办公区</option>
              <option>仓库区</option>
            </select>
            <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
          </div>
          
          <div class="relative">
            <select class="bg-dark-light border border-gray-700 rounded-lg py-2 pl-3 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 appearance-none">
              <option>今日事件</option>
              <option>昨日事件</option>
              <option>本周事件</option>
              <option>本月事件</option>
              <option>自定义范围</option>
            </select>
            <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-eventss-none"></i>
          </div>
          
          <button class="bg-primary hover:bg-primary/90 text-white rounded-lg py-2 px-4 text-sm flex items-center transition-colors">
            <i class="fa fa-download mr-2"></i>
            <span>导出报告</span>
          </button>
        </div>
      </div>
      
      <!-- 统计卡片 -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="bg-dark-light rounded-xl p-5 border border-gray-700/30 hover:border-primary/50 transition-all duration-300 transform hover:-translate-y-1">
          <div class="flex items-start justify-between">
            <div>
              <p class="text-gray-400 text-sm">摄像头总数</p>
              <h3 class="text-2xl font-bold text-white mt-1">16</h3>
              <p class="text-success text-xs flex items-center mt-2">
                <i class="fa fa-check-circle mr-1"></i>
                全部在线
              </p>
            </div>
            <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
              <i class="fa fa-video-camera"></i>
            </div>
          </div>
        </div>
        
        <div class="bg-dark-light rounded-xl p-5 border border-gray-700/30 hover:border-primary/50 transition-all duration-300 transform hover:-translate-y-1">
          <div class="flex items-start justify-between">
            <div>
              <p class="text-gray-400 text-sm">今日事件</p>
              <h3 class="text-2xl font-bold text-white mt-1">24</h3>
              <p class="text-warning text-xs flex items-center mt-2">
                <i class="fa fa-exclamation-circle mr-1"></i>
                3个需要处理
              </p>
            </div>
            <div class="w-10 h-10 rounded-lg bg-warning/10 flex items-center justify-center text-warning">
              <i class="fa fa-bell"></i>
            </div>
          </div>
        </div>
        
        <div class="bg-dark-light rounded-xl p-5 border border-gray-700/30 hover:border-primary/50 transition-all duration-300 transform hover:-translate-y-1">
          <div class="flex items-start justify-between">
            <div>
              <p class="text-gray-400 text-sm">异常事件</p>
              <h3 class="text-2xl font-bold text-white mt-1">5</h3>
              <p class="text-danger text-xs flex items-center mt-2">
                <i class="fa fa-arrow-up mr-1"></i>
                较昨日增加2个
              </p>
            </div>
            <div class="w-10 h-10 rounded-lg bg-danger/10 flex items-center justify-center text-danger">
              <i class="fa fa-exclamation-triangle"></i>
            </div>
          </div>
        </div>
        
        <div class="bg-dark-light rounded-xl p-5 border border-gray-700/30 hover:border-primary/50 transition-all duration-300 transform hover:-translate-y-1">
          <div class="flex items-start justify-between">
            <div>
              <p class="text-gray-400 text-sm">存储容量</p>
              <h3 class="text-2xl font-bold text-white mt-1">78%</h3>
              <p class="text-warning text-xs flex items-center mt-2">
                <i class="fa fa-hdd-o mr-1"></i>
                剩余空间: 560GB
              </p>
            </div>
            <div class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary">
              <i class="fa fa-database"></i>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 监控画面和事件列表 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        <!-- 监控画面区域 -->
        <div class="lg:col-span-2">
          <div class="bg-dark-light rounded-xl p-4 border border-gray-700/30 h-full">
            <div class="flex items-center justify-between mb-4">
              <h3 class="font-bold text-white">实时监控画面</h3>
              <div class="flex space-x-2">
                <button class="text-gray-400 hover:text-white transition-colors" title="刷新">
                  <i class="fa fa-refresh"></i>
                </button>
                <button class="text-gray-400 hover:text-white transition-colors" title="全屏">
                  <i class="fa fa-expand"></i>
                </button>
                <button class="text-gray-400 hover:text-white transition-colors" title="设置">
                  <i class="fa fa-cog"></i>
                </button>
              </div>
            </div>
            
            <!-- 监控摄像头网格 -->
            <div class="camera-grid">
              <!-- 摄像头1 - 有事件警告 -->
              <div class="relative rounded-lg overflow-hidden group border-2 border-danger blink-warning">
                <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/35b57816993a4a3b9223a6026e295244.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1756299762&x-signature=ETUUZvVfhJXFqvBvAM7exJBFUKY%3D" alt="入口监控" class="w-full h-48 object-cover">
                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
                  <div class="flex items-center justify-between">
                    <span class="text-xs font-medium">入口区域 #01</span>
                    <span class="text-xs bg-danger px-1.5 py-0.5 rounded">移动侦测</span>
                  </div>
                </div>
                <div class="absolute top-2 right-2 bg-dark/70 text-xs px-2 py-1 rounded flex items-center">
                  <i class="fa fa-circle text-success text-[8px] mr-1"></i>
                  实时
                </div>
                <div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                  <button class="bg-white text-dark rounded-full w-10 h-10 flex items-center justify-center mr-2 hover:bg-primary hover:text-white transition-colors">
                    <i class="fa fa-play"></i>
                  </button>
                  <button class="bg-white text-dark rounded-full w-10 h-10 flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
                    <i class="fa fa-search-plus"></i>
                  </button>
                </div>
              </div>
              
              <!-- 摄像头2 -->
              <div class="relative rounded-lg overflow-hidden group border border-gray-700/50">
                <img src="https://picsum.photos/id/1067/640/480" alt="停车场监控" class="w-full h-48 object-cover">
                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
                  <div class="flex items-center justify-between">
                    <span class="text-xs font-medium">停车场 #02</span>
                    <span class="text-xs bg-success px-1.5 py-0.5 rounded">正常</span>
                  </div>
                </div>
                <div class="absolute top-2 right-2 bg-dark/70 text-xs px-2 py-1 rounded flex items-center">
                  <i class="fa fa-circle text-success text-[8px] mr-1"></i>
                  实时
                </div>
                <div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                  <button class="bg-white text-dark rounded-full w-10 h-10 flex items-center justify-center mr-2 hover:bg-primary hover:text-white transition-colors">
                    <i class="fa fa-play"></i>
                  </button>
                  <button class="bg-white text-dark rounded-full w-10 h-10 flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
                    <i class="fa fa-search-plus"></i>
                  </button>
                </div>
              </div>
              
              <!-- 摄像头3 -->
              <div class="relative rounded-lg overflow-hidden group border border-gray-700/50">
                <img src="https://picsum.photos/id/1048/640/480" alt="办公区监控" class="w-full h-48 object-cover">
                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
                  <div class="flex items-center justify-between">
                    <span class="text-xs font-medium">办公区 #03</span>
                    <span class="text-xs bg-success px-1.5 py-0.5 rounded">正常</span>
                  </div>
                </div>
                <div class="absolute top-2 right-2 bg-dark/70 text-xs px-2 py-1 rounded flex items-center">
                  <i class="fa fa-circle text-success text-[8px] mr-1"></i>
                  实时
                </div>
                <div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                  <button class="bg-white text-dark rounded-full w-10 h-10 flex items-center justify-center mr-2 hover:bg-primary hover:text-white transition-colors">
                    <i class="fa fa-play"></i>
                  </button>
                  <button class="bg-white text-dark rounded-full w-10 h-10 flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
                    <i class="fa fa-search-plus"></i>
                  </button>
                </div>
              </div>
              
              <!-- 摄像头4 - 有事件警告 -->
              <div class="relative rounded-lg overflow-hidden group border-2 border-warning blink-warning">
                <img src="https://picsum.photos/id/1059/640/480" alt="仓库监控" class="w-full h-48 object-cover">
                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
                  <div class="flex items-center justify-between">
                    <span class="text-xs font-medium">仓库区 #04</span>
                    <span class="text-xs bg-warning px-1.5 py-0.5 rounded">区域入侵</span>
                  </div>
                </div>
                <div class="absolute top-2 right-2 bg-dark/70 text-xs px-2 py-1 rounded flex items-center">
                  <i class="fa fa-circle text-success text-[8px] mr-1"></i>
                  实时
                </div>
                <div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                  <button class="bg-white text-dark rounded-full w-10 h-10 flex items-center justify-center mr-2 hover:bg-primary hover:text-white transition-colors">
                    <i class="fa fa-play"></i>
                  </button>
                  <button class="bg-white text-dark rounded-full w-10 h-10 flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
                    <i class="fa fa-search-plus"></i>
                  </button>
                </div>
              </div>
            </div>
            
            <!-- 分页控制 -->
            <div class="flex items-center justify-between mt-4">
              <div class="text-sm text-gray-400">显示 1-4 共 16 个摄像头</div>
              <div class="flex space-x-1">
                <button class="w-8 h-8 flex items-center justify-center rounded bg-primary text-white text-sm">1</button>
                <button class="w-8 h-8 flex items-center justify-center rounded bg-dark-lighter hover:bg-gray-700 text-gray-300 text-sm transition-colors">2</button>
                <button class="w-8 h-8 flex items-center justify-center rounded bg-dark-lighter hover:bg-gray-700 text-gray-300 text-sm transition-colors">3</button>
                <button class="w-8 h-8 flex items-center justify-center rounded bg-dark-lighter hover:bg-gray-700 text-gray-300 text-sm transition-colors">4</button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 最近事件列表 -->
        <div>
          <div class="bg-dark-light rounded-xl p-4 border border-gray-700/30 h-full flex flex-col">
            <div class="flex items-center justify-between mb-4">
              <h3 class="font-bold text-white">最近监控事件</h3>
              <a href="#" class="text-primary text-sm hover:underline">查看全部</a>
            </div>
            
            <div class="flex-1 overflow-y-auto scrollbar-hide space-y-3">
              <!-- 事件1 -->
              <div class="bg-dark rounded-lg p-3 border border-danger/30 hover:border-danger/60 transition-colors cursor-pointer">
                <div class="flex items-start">
                  <div class="w-10 h-10 rounded-full bg-danger/10 flex items-center justify-center text-danger flex-shrink-0">
                    <i class="fa fa-motion-picture"></i>
                  </div>
                  <div class="ml-3 flex-1">
                    <div class="flex items-center justify-between">
                      <h4 class="font-medium text-white">异常移动侦测</h4>
                      <span class="text-xs text-gray-400">10:24</span>
                    </div>
                    <p class="text-sm text-gray-300 mt-1">入口区域 #01 检测到异常移动</p>
                    <div class="flex items-center justify-between mt-2">
                      <span class="text-xs bg-danger/20 text-danger px-2 py-0.5 rounded">未处理</span>
                      <button class="text-primary text-xs hover:underline">查看录像</button>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 事件2 -->
              <div class="bg-dark rounded-lg p-3 border border-warning/30 hover:border-warning/60 transition-colors cursor-pointer">
                <div class="flex items-start">
                  <div class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center text-warning flex-shrink-0">
                    <i class="fa fa-sign-in"></i>
                  </div>
                  <div class="ml-3 flex-1">
                    <div class="flex items-center justify-between">
                      <h4 class="font-medium text-white">区域入侵</h4>
                      <span class="text-xs text-gray-400">09:15</span>
                    </div>
                    <p class="text-sm text-gray-300 mt-1">仓库区 #04 检测到未经授权进入</p>
                    <div class="flex items-center justify-between mt-2">
                      <span class="text-xs bg-warning/20 text-warning px-2 py-0.5 rounded">处理中</span>
                      <button class="text-primary text-xs hover:underline">查看录像</button>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 事件3 -->
              <div class="bg-dark rounded-lg p-3 border border-gray-700/30 hover:border-gray-500/50 transition-colors cursor-pointer">
                <div class="flex items-start">
                  <div class="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center text-success flex-shrink-0">
                    <i class="fa fa-car"></i>
                  </div>
                  <div class="ml-3 flex-1">
                    <div class="flex items-center justify-between">
                      <h4 class="font-medium text-white">车辆出入</h4>
                      <span class="text-xs text-gray-400">08:42</span>
                    </div>
                    <p class="text-sm text-gray-300 mt-1">停车场 #02 检测到车辆进入</p>
                    <div class="flex items-center justify-between mt-2">
                      <span class="text-xs bg-success/20 text-success px-2 py-0.5 rounded">已处理</span>
                      <button class="text-primary text-xs hover:underline">查看录像</button>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 事件4 -->
              <div class="bg-dark rounded-lg p-3 border border-gray-700/30 hover:border-gray-500/50 transition-colors cursor-pointer">
                <div class="flex items-start">
                  <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary flex-shrink-0">
                    <i class="fa fa-door-open"></i>
                  </div>
                  <div class="ml-3 flex-1">
                    <div class="flex items-center justify-between">
                      <h4 class="font-medium text-white">门禁开启</h4>
                      <span class="text-xs text-gray-400">07:58</span>
                    </div>
                    <p class="text-sm text-gray-300 mt-1">主入口 #01 门禁正常开启</p>
                    <div class="flex items-center justify-between mt-2">
                      <span class="text-xs bg-secondary/20 text-secondary px-2 py-0.5 rounded">已处理</span>
                      <button class="text-primary text-xs hover:underline">查看录像</button>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 事件5 -->
              <div class="bg-dark rounded-lg p-3 border border-gray-700/30 hover:border-gray-500/50 transition-colors cursor-pointer">
                <div class="flex items-start">
                  <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
                    <i class="fa fa-bell"></i>
                  </div>
                  <div class="ml-3 flex-1">
                    <div class="flex items-center justify-between">
                      <h4 class="font-medium text-white">设备维护</h4>
                      <span class="text-xs text-gray-400">07:12</span>
                    </div>
                    <p class="text-sm text-gray-300 mt-1">办公区 #03 摄像头例行维护</p>
                    <div class="flex items-center justify-between mt-2">
                      <span class="text-xs bg-primary/20 text-primary px-2 py-0.5 rounded">已完成</span>
                      <button class="text-primary text-xs hover:underline">查看详情</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 事件统计图表 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 事件趋势图 -->
        <div class="lg:col-span-2">
          <div class="bg-dark-light rounded-xl p-4 border border-gray-700/30 h-full">
            <div class="flex items-center justify-between mb-4">
              <h3 class="font-bold text-white">事件趋势分析</h3>
              <div class="flex space-x-2">
                <button class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full hover:bg-primary/20 transition-colors">日</button>
                <button class="bg-dark-lighter text-gray-300 text-xs px-3 py-1 rounded-full hover:bg-gray-700 transition-colors">周</button>
                <button class="bg-dark-lighter text-gray-300 text-xs px-3 py-1 rounded-full hover:bg-gray-700 transition-colors">月</button>
              </div>
            </div>
            <div class="h-80">
              <canvas id="eventsTrendChart"></canvas>
            </div>
          </div>
        </div>
        
        <!-- 事件类型分布 -->
        <div>
          <div class="bg-dark-light rounded-xl p-4 border border-gray-700/30 h-full">
            <div class="flex items-center justify-between mb-4">
              <h3 class="font-bold text-white">事件类型分布</h3>
              <button class="text-gray-400 hover:text-white transition-colors">
                <i class="fa fa-ellipsis-v"></i>
              </button>
            </div>
            <div class="h-80 flex items-center justify-center">
              <canvas id="eventTypesChart"></canvas>
            </div>
            <div class="grid grid-cols-2 gap-2 mt-4">
              <div class="flex items-center">
                <span class="w-3 h-3 rounded-full bg-primary mr-2"></span>
                <span class="text-sm text-gray-300">移动侦测</span>
              </div>
              <div class="flex items-center">
                <span class="w-3 h-3 rounded-full bg-warning mr-2"></span>
                <span class="text-sm text-gray-300">区域入侵</span>
              </div>
              <div class="flex items-center">
                <span class="w-3 h-3 rounded-full bg-success mr-2"></span>
                <span class="text-sm text-gray-300">车辆出入</span>
              </div>
              <div class="flex items-center">
                <span class="w-3 h-3 rounded-full bg-secondary mr-2"></span>
                <span class="text-sm text-gray-300">门禁事件</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>

  <!-- JavaScript -->
  <script>
    // 更新当前时间
    function updateCurrentTime() {
      const now = new Date();
      const options = { 
        year: 'numeric', 
        month: '2-digit', 
        day: '2-digit', 
        hour: '2-digit', 
        minute: '2-digit', 
        second: '2-digit' 
      };
      document.getElementById('current-time').textContent = now.toLocaleString('zh-CN', options);
    }
    
    // 初始化时更新时间并设置定时器
    updateCurrentTime();
    setInterval(updateCurrentTime, 1000);
    
    // 侧边栏切换
    document.getElementById('sidebar-toggle').addEventListener('click', function() {
      const sidebar = document.getElementById('sidebar');
      sidebar.classList.toggle('hidden');
      sidebar.classList.toggle('absolute');
      sidebar.classList.toggle('inset-y-0');
      sidebar.classList.toggle('left-0');
      sidebar.classList.toggle('z-40');
    });
    
    // 事件趋势图表
    const trendCtx = document.getElementById('eventsTrendChart').getContext('2d');
    const trendChart = new Chart(trendCtx, {
      type: 'line',
      data: {
        labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
        datasets: [
          {
            label: '移动侦测',
            data: [2, 1, 3, 8, 5, 7, 9, 4],
            borderColor: '#165DFF',
            backgroundColor: 'rgba(22, 93, 255, 0.1)',
            tension: 0.4,
            fill: true
          },
          {
            label: '区域入侵',
            data: [0, 0, 1, 2, 0, 1, 3, 0],
            borderColor: '#FF7D00',
            backgroundColor: 'rgba(255, 125, 0, 0.1)',
            tension: 0.4,
            fill: true
          },
          {
            label: '其他事件',
            data: [1, 0, 2, 4, 6, 3, 2, 1],
            borderColor: '#00B42A',
            backgroundColor: 'rgba(0, 180, 42, 0.1)',
            tension: 0.4,
            fill: true
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'top',
            labels: {
              color: '#86909C'
            }
          }
        },
        scales: {
          x: {
            grid: {
              color: 'rgba(134, 144, 156, 0.1)'
            },
            ticks: {
              color: '#86909C'
            }
          },
          y: {
            beginAtZero: true,
            grid: {
              color: 'rgba(134, 144, 156, 0.1)'
            },
            ticks: {
              color: '#86909C',
              precision: 0
            }
          }
        }
      }
    });
    
    // 事件类型分布图表
    const typesCtx = document.getElementById('eventTypesChart').getContext('2d');
    const typesChart = new Chart(typesCtx, {
      type: 'doughnut',
      data: {
        labels: ['移动侦测', '区域入侵', '车辆出入', '门禁事件'],
        datasets: [{
          data: [42, 15, 28, 15],
          backgroundColor: [
            '#165DFF',
            '#FF7D00',
            '#00B42A',
            '#0FC6C2'
          ],
          borderWidth: 0,
          hoverOffset: 4
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '70%',
        plugins: {
          legend: {
            display: false
          }
        }
      }
    });
    
    // 模拟实时数据更新
    setInterval(() => {
      // 随机更新一些数据点
      trendChart.data.datasets.forEach(dataset => {
        const lastValue = dataset.data[dataset.data.length - 1];
        const newValue = Math.max(0, lastValue + Math.floor(Math.random() * 3) - 1);
        dataset.data.push(newValue);
        dataset.data.shift();
      });
      trendChart.update();
    }, 5000);
  </script>
</body>
</html>
